<template>
  <template v-if="$route.meta.appAlone">
    <admin-main></admin-main>
  </template>
  <div class="app-container app-theme-dark" v-else>
    <el-aside class="app-aside" width="256px">
      <div class="app-logo">
        <img :src="app.config.logo" v-if="app.config.logo" />
        <div class="app-title">{{ app.config.title }}</div>
      </div>

      <menu-bar></menu-bar>
    </el-aside>
    <div class="app-container">
      <header class="app-header">
        <!-- <nav-bar></nav-bar> -->
        <!-- <tab-bar></tab-bar> -->

        <div class="app-nav-bar">
          <div class="app-nav">
            <tab-bar></tab-bar>
          </div>
          <!-- 用户下拉 -->
          <div class="app-user">
            <el-dropdown>
              <span>
                <el-avatar :size="30" :src="userInfo.avatar" v-if="userInfo.avatar" />
                <span>{{ userInfo.username }}</span>
                <i class="el-icon-arrow-down el-icon--right" />
              </span>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <router-link :to="`${$config.base}/system/modify-password`">密码修改</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </header>
      <admin-main></admin-main>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import NavBar from 'jax-ui/layout/NavBar.vue'
import TabBar from 'jax-ui/layout/TabBar.vue'
import MenuBar from 'jax-ui/layout/MenuBar.vue'
import AdminMain from 'jax-ui/layout/Main.vue'

export default {
  components: {
    MenuBar,
    NavBar,
    TabBar,
    AdminMain,
  },
  data() {
    return {
      siteList: [],
    }
  },
  computed: {
    ...mapState({
      app: (state) => state.app,
      userInfo: (state) => state.app.userInfo,
    }),
  },
  created() {
    this.$store.dispatch('app/getMenu')
    this.$store.dispatch('app/getConfig')
    this.$store.dispatch('app/getUserInfo')
    this.$store.dispatch('app/getDict')
  },
  // 页面加载前
  onBeforeMount() {
    // onLayoutResize()
    // window.addEventListener('resize', onLayoutResize)
  },

  // 页面卸载时
  onUnmounted() {
    // window.removeEventListener('resize', onLayoutResize)
  },

  methods: {
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('app/logout').then(() => {
          // location.href = `${this.$config}.base/login`
        })
      })
    },
    changeCollapsed() {},
  },
}
</script>

<style></style>
